﻿<!-- DATACONTEXT = GameOverViewModel -->
<UserControl 
  x:Class="BubbleBurst.View.GameOverView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:thriple="http://thriple.codeplex.com/"
  x:Name="_root" x:FieldModifier="private"
  >
  
  <!-- This Grid looks like a translucent sheet of glass over the window's client area. -->
  <Grid x:Name="_rootGrid" x:FieldModifier="private" Background="#88000000">
    <Grid.Style>
      <Style TargetType="{x:Type Grid}">
        <Style.Triggers>
          <DataTrigger Binding="{Binding ElementName=_root, Path=Visibility}" Value="Visible">
            <DataTrigger.EnterActions>
              <BeginStoryboard>
                <Storyboard>
                  <ColorAnimation
                    Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" 
                    Duration="0:0:0.75" 
                    FillBehavior="Stop"
                    From="Transparent"
                    />
                </Storyboard>
              </BeginStoryboard>
            </DataTrigger.EnterActions>
          </DataTrigger>
        </Style.Triggers>
      </Style>
    </Grid.Style>

    <Border 
      x:Name="_contentBorder"
      x:FieldModifier="private"
      BorderBrush="Gray" 
      BorderThickness="3" 
      CornerRadius="8" 
      RenderTransformOrigin="0.5,0.5"
      Width="400" Height="200"
      >
      <Border.Resources>
        <Storyboard x:Key="IntroStoryboard">
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetProperty="RenderTransform.(TransformGroup.Children)[0].(TranslateTransform.Y)" 
            Duration="0:0:1.5" 
            Equation="ElasticEaseOut"
            FillBehavior="Stop"
            From="-200" 
            />
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetProperty="RenderTransform.(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" 
            Duration="0:0:1" 
            Equation="CubicEaseOut"
            FillBehavior="Stop"
            From="0"
            To="1"
            />
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetProperty="RenderTransform.(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" 
            Duration="0:0:1" 
            Equation="CubicEaseOut"
            FillBehavior="Stop"
            From="0"
            To="1"
            />
          <DoubleAnimation 
            Storyboard.TargetProperty="Opacity" 
            Duration="0:0:1" 
            FillBehavior="Stop"
            From="0"
            To="1"
            />
        </Storyboard>
        <Storyboard x:Key="OutroStoryboard" Completed="HandleOutroCompleted">
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetName="_contentBorder"
            Storyboard.TargetProperty="RenderTransform.(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" 
            Duration="0:0:0.75" 
            Equation="CubicEaseOut"
            FillBehavior="Stop"
            From="1"
            To="0"
            />
          <thriple:EasingDoubleAnimation 
            Storyboard.TargetName="_contentBorder"
            Storyboard.TargetProperty="RenderTransform.(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" 
            Duration="0:0:0.75" 
            Equation="CubicEaseOut"
            FillBehavior="Stop"
            From="1"
            To="0"
            />
          <ColorAnimation
            Storyboard.TargetName="_rootGrid"
            Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" 
            Duration="0:0:0.75" 
            FillBehavior="Stop"
            To="Transparent"
            />
        </Storyboard>
      </Border.Resources>

      <Border.Style>
        <Style TargetType="{x:Type Border}">
          <Setter Property="RenderTransform">
            <Setter.Value>
              <TransformGroup>
                <TranslateTransform X="0" Y="0" />
                <ScaleTransform ScaleX="1" ScaleY="1" />
              </TransformGroup>
            </Setter.Value>
          </Setter>
          <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=_root, Path=Visibility}" Value="Visible">
              <DataTrigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource IntroStoryboard}" />
              </DataTrigger.EnterActions>
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </Border.Style>

      <Border.Effect>
        <DropShadowEffect />
      </Border.Effect>

      <Border.Background>
        <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
          <GradientStop Color="White" Offset="0" />
          <GradientStop Color="WhiteSmoke" Offset="0.7" />
          <GradientStop Color="LightGray" Offset="1" />
        </LinearGradientBrush>
      </Border.Background>

      <!-- MAIN CONTENT AREA -->
      <DockPanel Margin="4">
        <!-- TITLE -->
        <TextBlock 
          DockPanel.Dock="Top" 
          FontFamily="{DynamicResource MiramonteBoldFontFamily}"
          FontSize="24"
          FontWeight="Bold"
          Margin="10"
          Text="{Binding Path=Title, Mode=OneTime}" 
          TextAlignment="Center"   
          TextDecorations="Underline"
          TextWrapping="Wrap"           
          />

        <!-- SUBTITLE -->
        <TextBlock 
          DockPanel.Dock="Top" 
          FontFamily="{DynamicResource MiramonteFontFamily}"
          FontSize="18"
          Margin="0,6,0,0"
          Text="{Binding Path=Subtitle, Mode=OneTime}" 
          TextAlignment="Center"             
          TextWrapping="Wrap"           
          />

        <!-- BUTTON CONTAINER -->
        <Grid DockPanel.Dock="Bottom">          
          <Grid.Resources>
            <Style x:Key="ButtonTextStyle" TargetType="{x:Type TextBlock}">
              <Setter Property="FontSize" Value="20" />
              <Setter Property="Foreground" Value="#1B1E40" />
              <Setter Property="Margin" Value="6" />
              <Setter Property="RenderTransform">
                <Setter.Value>
                  <ScaleTransform ScaleX="1" ScaleY="1" />
                </Setter.Value>
              </Setter>
              <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
              <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                  <Trigger.EnterActions>
                    <BeginStoryboard>
                      <Storyboard>
                        <thriple:EasingDoubleAnimation 
                          Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                          Duration="0:0:0.2"
                          Equation="CubicEaseInOut"
                          To="1.25"
                          />
                        <thriple:EasingDoubleAnimation 
                          Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                          Duration="0:0:0.2"
                          Equation="CubicEaseInOut"
                          To="1.25"
                          />
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.EnterActions>
                  <Trigger.ExitActions>
                    <BeginStoryboard>
                      <Storyboard>
                        <thriple:EasingDoubleAnimation 
                          Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                          Duration="0:0:0.1"
                          Equation="CubicEaseInOut"
                          To="1"
                          />
                        <thriple:EasingDoubleAnimation 
                          Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                          Duration="0:0:0.1"
                          Equation="CubicEaseInOut"
                          To="1"
                          />
                      </Storyboard>
                    </BeginStoryboard>
                  </Trigger.ExitActions>
                </Trigger>
              </Style.Triggers>
            </Style>
            <Style x:Key="PlayAgainButtonTextStyle" BasedOn="{StaticResource ButtonTextStyle}" TargetType="{x:Type TextBlock}">
              <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                  <Setter Property="Foreground" Value="Green" />
                </Trigger>
              </Style.Triggers>
            </Style>
            <Style x:Key="EndGameButtonTextStyle" BasedOn="{StaticResource ButtonTextStyle}" TargetType="{x:Type TextBlock}">
              <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                  <Setter Property="Foreground" Value="Red" />
                </Trigger>
              </Style.Triggers>
            </Style>
          </Grid.Resources>
          
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>

          <!-- PLAY AGAIN BUTTON -->
          <TextBlock 
            Grid.Column="0" 
            FontFamily="{DynamicResource MiramonteBoldFontFamily}"   
            HorizontalAlignment="Center"
            Margin="20,0,0,0"
            >
            <Hyperlink 
              Click="HandlePlayAgainHyperlinkClick" 
              FocusVisualStyle="{x:Null}" 
              TextDecorations="None"
              >
              <TextBlock Style="{StaticResource PlayAgainButtonTextStyle}">PLAY AGAIN</TextBlock>
            </Hyperlink>
          </TextBlock>

          <!-- I'M DONE BUTTON -->
          <TextBlock 
            Grid.Column="1" 
            FontFamily="{DynamicResource MiramonteBoldFontFamily}"
            HorizontalAlignment="Center"
            >
            <Hyperlink 
              Command="{Binding Path=QuitCommand, Mode=OneTime}" 
              FocusVisualStyle="{x:Null}"
              TextDecorations="None"
              >
              <TextBlock Style="{StaticResource EndGameButtonTextStyle}">I'M DONE</TextBlock>
            </Hyperlink>
          </TextBlock>
        </Grid>

        <!-- WANT TO PLAY AGAIN? -->
        <TextBlock 
          FontFamily="{DynamicResource MiramonteFontFamily}"
          FontSize="18"
          HorizontalAlignment="Center"
          Text="Do you want to play again?"  
          TextWrapping="Wrap" 
          VerticalAlignment="Center" 
          />
      </DockPanel>
    </Border>
  </Grid>
</UserControl>